<template>
	<view>
		<u--input
			v-if="disabled || !writable"
		  :prefixIcon="'clock'"
			border="bottom"
			disabled
			:clearable="clearable"
			v-model="multipleVal"
		></u--input>
		
		<view @tap="show = true" v-else class="time-view">
			<view :class="multipleVal ? 'inherit' : 'prs'">{{ multipleVal || placeholder }}</view>
			<view>
				<!-- <image v-show="clearable && multipleVal" style="width: 36rpx;height: 36rpx;" src="../static/img/close.png"></image> -->
				<u-icon
				  v-show="clearable && multipleVal"
				  name="close-circle-fill"
				  size="20"
				  color="#c0c4cc"
				  @click.native.stop="clearData"
				></u-icon>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view v-show="required && validator" class="requiredMessage">{{ requiredMessage }}</view>
		
		<u-popup :show="show" mode="bottom" :round="10" @close="show = false" @open="popupOpen">
			<view class="select-content">
				<view class="button">
					<view @tap="show = false"><u--text style="float: left;" type="primary" text="取消"></u--text></view>
					<view @tap="btnConfirm"><u--text style="float: right;" type="primary" text="确认"></u--text></view>
				</view>
				<view class="select-data">
					<view class="search" v-if="filterable">
						<u-search placeholder="输入搜索" :showAction="false" v-model="keyword"></u-search>
					</view>
					<view class="data" :style="{ height: filterable ? 'calc(100% - 80rpx)' : '100%' }">
						<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y">
							<view class="row">
								<u-checkbox-group v-model="checkboxValue" placement="column">
									<u-checkbox
										:customStyle="{marginBottom: '20rpx'}"
										v-for="(item, index) in checkList"
										:key="item[defaultProps.value]"
										:label="item[defaultProps.label] || item[defaultProps.value]"
										:name="item[defaultProps.value]"
										:activeColor="'#FFCC33'"
									>
									</u-checkbox>
								</u-checkbox-group>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
export default {
	data() {
		return {
			multipleVal: '',
			show: false,
			validator: false,
			keyword: '',
			checkList: [],
			listAll: [],
			timer: null,
			checkboxValue: [],
			confimData: [] // 监听用
		};
	},
	props: {
		value: {
			type: Array,
			default: () => ([])
		},
		disabled: {
			type: Boolean,
			default: false
		},
		writable: {
			type: Boolean,
			default: true
		},
		defaultProps: {
			type: Object,
			default: () => ({ label: 'label', value: 'value' })
		},
		columns: {
			type: Array,
			default: () => ([{ label: '', value: '' }])
		},
		required: {
			type: Boolean,
			default: false
		},
		requiredMessage: {
			type: String,
			default: '必填!'
		},
		placeholder: {
			type: String,
			default: '请选择'
		},
		filterable: {
			type: Boolean,
			default: true
		},
		clearable: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		validateStatus() {
			return this.$store?.state?.validate?.status || false
		}
	},
	watch:{
		value: {
			handler () {
				this.checkboxValue = this.value
				this.confimData = this.value
				let texts = []
				this.listAll = JSON.parse(JSON.stringify(this.columns))
				this.listAll.forEach(item => {
					if(this.value.indexOf(item[this.defaultProps.value]) >= 0) {
						texts.push(item[this.defaultProps.label] ?? item[this.defaultProps.value])
					}
				})
				this.checkList = this.listAll
				this.multipleVal = texts.join('，')
			},
			immediate: true,
			// deep: true
		},
		// 搜索过滤
		keyword() {
			this.debounce(this.filterData, 200)
		},
		// 校验
		validateStatus() {
			if(this.validateStatus && this.required) {
				if(!this.val) {
					this.validator = true
				} else {
					this.validator = false
				}
			}
		},
		confimData() {
			if(this.validateStatus && this.required) {
				if(!this.confimData.length) {
					this.validator = true
				} else {
					this.validator = false
				}
			}
		}
	},
	methods:{
		// 确认选择
		btnConfirm() {
			this.confimData = this.checkboxValue
			this.$emit('input', this.checkboxValue)
			// let texts = []
			// this.listAll.forEach(item => {
			// 	if(this.checkboxValue.indexOf(item[this.defaultProps.value]) >= 0) {
			// 		texts.push(item[this.defaultProps.label] ?? item[this.defaultProps.value])
			// 	}
			// })
			// this.multipleVal = texts.join('，')
			this.show = false
		},
		// 防抖
		debounce(fn, wait) {
			if(this.timer) {
				clearTimeout(this.timer)
				this.timer = null
			}
			this.timer = setTimeout(fn, wait)
		},
		// 数据过滤
		filterData() {
			this.checkList = this.listAll.filter(item => (item[this.defaultProps.label] ?? item[this.defaultProps.value]).indexOf(this.keyword.trim()) >= 0) || []
		},
		// 清除
		clearData() {
			if(!this.clearable || !this.multipleVal) {
				return
			}
			this.multipleVal = ''
			this.checkboxValue = []
			this.$emit('input', this.checkboxValue)
		},
		// 打开弹出层
		popupOpen() {
			console.log('打开弹出层')
		},
	}
}
</script>

<style scoped>
.select-content {
	width: 100%;
	height: 600rpx;
	background-color: #f5f7fa;
}
.select-content .button {
	width: 100%;
	height: 70rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20rpx;
	box-sizing: border-box;
}
.select-content .select-data {
	width: 100%;
	height: calc(100% - 70rpx);
	padding: 0 40rpx 40rpx 40rpx;
	box-sizing: border-box;
}
.select-data .search {
	width: 100%;
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.select-data .data {
	width: 100%;
}
.scroll-Y {
	height: 100%;
	padding: 15rpx;
	box-sizing: border-box;
}
.data .row {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 15rpx;
}

.row .row-text {
	color: #333436;
	font-weight: 700;
	font-size: 28rpx;
	margin-right: 20rpx;
}

.requiredMessage {
	width: 100%;
	height: 50rpx;
	line-height: 50rpx;
	color: #f56c6c;
	font-size: 22rpx;
}

.time-view {
	width: 100%;
	height: 60rpx;
	border-bottom: 1px solid #eee;
	/* border-radius: 8rpx; */
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20rpx;
	box-sizing: border-box;
}
.time-view view:nth-of-type(1) {
	font-size: 28rpx;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.time-view view:nth-of-type(2) {
	display: flex;
	align-items: center;
}
.inherit {
	color: inherit;
}
.prs {
	color: rgb(192, 196, 204);
}
</style>